body{
    background: #f2f2f2;
}

.frame{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    margin-top: -200px;
    margin-left: -200px;
    border-radius: 3px;
    box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.3);
    background: #348772;
    color: #fff;
}

.center{
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: #fff3; */
}

.dot1,.dot2,.dot3{
    background: #fff;
    border-radius: 50%;
    animation-fill-mode: both;
    position: absolute;
}

.dot1{
    width: 90px;
    height: 90px;
    animation: jump1 2s cubic-bezier(0.21,0.98,0.6,0.99) infinite alternate;
}

.dot2{
    width: 60px;
    height: 60px;
    animation: jump2 2s cubic-bezier(0.21,0.98,0.6,0.99) infinite alternate;
}

.dot3{
    width: 30px;
    height: 30px;
    animation: jump3 2s cubic-bezier(0.21,0.98,0.6,0.99) infinite alternate;
}

@keyframes jump1{
    0%,10%{
        box-shadow: 2px 2px 3px 2px rgba(0,0,0,0.2);
        scale: 0;
    }
    100%{
        box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.3);
        scale: 1;
    }
}

@keyframes jump2{
    0%,30%{
        box-shadow: 2px 2px 3px 2px rgba(0,0,0,0.2);
        scale: 0;
    }
    100%{
        box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.3);
        scale: 1;
    }
}

@keyframes jump3{
    0%,50%{
        box-shadow: 2px 2px 3px 2px rgba(0,0,0,0.2);
        scale: 0;
    }
    100%{
        box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.3);
        scale: 1;
    }
}